<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <script src="templets/default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
    <script src="templets/default/js/cookie.js"></script>
    <script src="templets/default/js/code1.js"></script>

    <link rel="stylesheet" href="templets/default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="templets/default/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1129958_5sy05uk9y3o.css"/>

    <style>
        body {
            font-family: "Arial"
        }

        .mui-bar ~ .mui-content .mui-fullscreen {
            top: 20px;
            height: auto;
        }

        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }

        .mui-card-footer, .mui-card-header {
            padding: 0 15px;
        }

        .mui-bar ~ .mui-pull-top-tips {
            top: 24px;
        }

        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }

        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }

        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }

        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }

        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }

        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }

        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mui-pull-top-canvas canvas {
            width: 40px;
        }

        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }

        .mui-slider-indicator.mui-segmented-control {
            background: #fff;
            padding: 0 10px 0 10px;
        }

        .mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
            top: 116px;
            bottom: 50px;
        }

        .mui-table-view-cell {
            padding: 12px 15px;
            padding-bottom: 5px;
        }

        .mui-table-view-cell:after {
            right: 15px;
            background-color: #f5f5f5;
        }

        .mui-card {
            box-shadow: none;
            margin: 0;
        }

        .mui-card-footer:before, .mui-card-header:after {
            height: 0;
        }

        .mui-card-footer:before, .mui-card-header:after {
            height: 0;
        }

        .mui-card-header {
            font-weight: 500;
            font-size: 14px;
        }

        .mui-card-footer {
            color: #ccc;
        }

        input[type=search] {
            border-radius: 20px;
        }

        .meta-info {
            display: flex;
            color: #8f8f94;
        }

        .mui-table-view .mui-media-object {
            width: 100px !important;
            height: 70px;
            border-radius: 5px;
        }

        .roof-placement1 {
            position: fixed;
            top: 0;
            left: 0;
        }

        .roof-placement2 {
            position: fixed !important;
            top: 49px;
            left: 0;
        }

        .mui-slider-indicator.mui-segmented-control {
            position: fixed !important;
            top: 49px;
            left: 0;
        }

        .mui-bar {
            bottom: 0;
        }

        /*测试*/
        .gold-coin-box {
            width: 60px;
            height: 100px;
            /*background: #fff;*/
            /*-moz-box-shadow: 0px 4px 16px #333333;*/
            /*-webkit-box-shadow: 0px 4px 16px #333333;*/
            /*box-shadow: 0px 4px 16px #333333;*/
            /*border-radius: 50%;*/
            /*-webkit-border-radius: 50%;*/
            /*-moz-border-radius: 50%;*/
            /*-ms_border-radius: 50%;*/
            display: inline-block;
            position: fixed;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/gold-coin-1.png") no-repeat;
            background-size: 100% 100%;
            right: 20px;
            bottom: 60px;
            z-index: 55;
            animation: heart 1.3s ease-in-out 2.7s infinite alternate;

            /*-webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;*/
        }

        .rotary-animation {
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }

        @keyframes heart {
            from {
                transform: translate(0, 0)
            }
            to {
                transform: translate(0, 6px)
            }
        }

        @-webkit-keyframes rotate {
            from {
                -webkit-transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(360deg)
            }
        }

        @-moz-keyframes rotate {
            from {
                -moz-transform: rotate(0deg)
            }
            to {
                -moz-transform: rotate(359deg)
            }
        }

        @-o-keyframes rotate {
            from {
                -o-transform: rotate(0deg)
            }
            to {
                -o-transform: rotate(359deg)
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg)
            }
            to {
                transform: rotate(359deg)
            }
        }

        .hundred-buju {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .gold-coin-bo_in {
            width: 60px;
            height: 100px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms_border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .gold-coin-bo-c {
            width: 60px;
            height: 60px;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0;
            background: rgba(253, 194, 35, 0.7);
        }
        .yaoqing{
            position: fixed;
            bottom: 150px;
            right: 0;
            width: 100px;
            height: 100px;
            z-index: 55;
        }
        .notice-box{
            width: 100%;
            height: 30px;
            overflow: hidden;
            position: fixed;
            left: 0;
            top: 87px;
            background: #fff;
        }
        #marquee6 {
            height: 30px;
            overflow: hidden;
            color: #6d6d72;
            text-align: center;
            position: relative;
            margin-left: 40px;
        }
        #marquee6 li{
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            min-width: 200px;
            float: left;
        }
        .notice-box:before{
            font-family: "iconfont" !important;
            font-size: 26px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            color: red;
            content: "\e63f";
            position: absolute;
            left: 5px;
            top: 4px;
        }
    </style>
</head>

<body>

<div class="mui-content">
    <!--加载动画-->
    <!--<div class="logding" id="loading">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>-->
    <div id="slider" class="mui-slider mui-fullscreen">
        <div class="head-manipulation roof-placement1">
            <div class="mui-row">
                <div class="mui-col-sm-2 mui-col-xs-2 user-logo-box">
                    <a href="templets/html/user.html">
                        <div class="logo-box">
                            <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/icon/user-logo.png">
                        </div>
                    </a>
                </div>
                <div class="mui-col-sm-9 mui-col-xs-9">
                    <!--<a href="templets/html/searchnews.html">-->
                    <!--<div class="mui-input-row mui-search">
                        <input type="search" class="mui-input-clear" placeholder="搜索新闻" readonly>
                    </div>-->
                    <div class="search-news-box">
                        <i class="mui-icon mui-icon-search"></i><span>搜索新闻</span>
                    </div>
                    <!--</a>-->
                </div>
                <div class="mui-col-sm-1 mui-col-xs-1"></div>
            </div>
        </div>
        <div id="sliderSegmentedControl roof-placement2"
             class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll" id="classification-box"></div>
        </div>
        <div class="notice-box">
            <div id="marquee6">
                <ul id="marquee7">
                </ul>
            </div>
        </div>
        <div class="mui-slider-group">
        </div>
    </div>
</div>

<!--阅读宝-->
<div class="gold-coin-box modtai-control-show">
    <div class="gold-coin-bo_in">
        <div class="gold-coin-bo-c"></div>
        <!--<div class="gold-coin-b_num">43%</div>-->
    </div>
</div>

<div class="yaoqing">
    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/artisan-plate/images/icon/yaoqing.png" alt="">
</div>

<!-- 底部导航 -->

<nav class="mui-bar mui-bar-tab" id="tabhref">
    <a class="mui-tab-item mui-active" href="index.html">
        <span class="mui-icon icon iconfont icon-xinwen"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="templets/html/video.html">
				<span class="mui-icon icon iconfont icon-shipin">
					<!-- <span class="mui-badge">9</span> --></span>
        <span class="mui-tab-label">视频</span>
    </a>
    <a class="mui-tab-item" href="templets/html/shop.html">
        <span class="mui-icon icon iconfont icon-shangcheng"></span>
        <span class="mui-tab-label">阅读宝商城</span>
    </a>
    <a class="mui-tab-item" href="templets/html/task.html">
        <span class="mui-icon icon iconfont icon-task"></span>
        <span class="mui-tab-label">任务</span>
    </a>
</nav>

<script src="templets/default/js/mui.js"></script>
<script src="templets/default/js/index.js"></script>
<script src="templets/default/js/public.js"></script>

<script src="templets/default/js/mui.pullToRefresh.js"></script>
<script src="templets/default/js/mui.pullToRefresh.material.js"></script>
<script src="templets/default/js/timeboot.js"></script>
<script src="templets/default/js/kxbdSuperMarquee.js"></script>
<script src="templets/default/js/code3.js"></script>
<!--<script src="templets/default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->
<script>
    window.onpageshow = function (e) {
        if (e.persisted) {
            var head = $("head").remove("script[role='reload']");
            $("<scri"+"pt>"+"</scr"+"ipt>").attr({role:'reload',src:'templets/default/js/timeboot.js',type:'text/javascript'}).appendTo(head);
            // window.location.reload(true);
        }
    }

    // 微信登录
    $(function () {
        var account1 = getCookie('newsAccount');
        console.log('account------',account1);
        if(account1=='undefined' || account1==null || account1==''){

            $.ajax({
                url: website + "/UserController/queryUserInformation",
                type: "post",
                data: {
                    "userId": userId,
                },
                success: function (data) {
                    if(data.data.account==null || data.data.account==''){
                        window.location.href='templets/html/account.html';
                    }else{
                        setCookie('newsAccount',data.data.account);
                    }
                }, error: function () {
                    window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed752d87990909bb&redirect_uri=http://newst.whilte.com/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
                }
            })
        }

        newstitleClass();
        notice();

    });

    mui.init({
        swipeBack: true, //启用右滑-关闭功能
        gestureConfig: {
            tap: true, //默认为true
        },
    });


    // 公告
    function notice() {
        $.ajax({
            url:website+'/NoticeController/queryAll',
            type:'post',
            success:function (data) {
                var html='';
                data.data.forEach(function (value) {
                    html+='<li class="mui-ellipsis">'+value.announcementContent+'</li>';
                });
                $("#marquee7").html(html);
                $('#marquee6').kxbdSuperMarquee({
                    isMarquee:true,
                    isEqual:false,
                    scrollDelay:20,
                    direction:'left'
                });
            }
        });

    }




    mui("body").on('tap', '.search-news-box', function () {
        mui.openWindow({
            url: 'templets/html/searchnews.html'
        });
    });

    mui('#tabhref').on('tap', 'a', function (e) {
        if($(this).is('.no')){
            mui.toast('暂未开放');
        }else{
            mui.openWindow({
                url: $(this).attr('href')
            });
        }

    });

    mui('body').on('tap', '.user-logo-box', function (e) {
        mui.openWindow({
            url: 'templets/html/user.html'
        });
    });




    // 赚钱方法，释于2019/05/06 16:52
    /*// 判断用户是否在阅读
    var wqe = 0;
    var pagejih = 0;//等于0是页面激活状态,等于1是页面未激活状态
    var num = 0;//动画的当前进度

    function aaa() {
        wqe++;
        if (wqe == 16) {
            wqe=0;
            pagejih=1;
        }
        setTimeout(aaa, 1000); //setTimeout是超时调用，使用递归模拟间歇调用
    };

    function bbb() {
        if(pagejih == 0){
            num++;
            if(num==5){
                num=0;
                if(userId!=null){
                    $.ajax({
                        url: website + "/BrowseController/addBrowse",
                        type: "post",
                        data: {
                            quantityOfTime: 15,
                            userId: userId,
                        },
                        success: function (data) {

                        }
                    });
                }

            }
        }
        setTimeout(bbb, 1000);
    }

    setTimeout(aaa, 1000);//1s后执行动画
    setTimeout(bbb, 1000);

    mui('body').on('swipeup', '#slider', function (e) {
        pagejih=0;
        wqe=0;
    });
    mui('body').on('swipedown', '#slider', function (e) {
        pagejih=0;
        wqe=0;
    });*/


    function newstitleClass() {
        //新闻标题
        $.ajax({
            url: website + '/NewsClassification/queryAll',
            type: 'post',
            success: function (data) {
                // classification
                var titlehtml_ = '';
                var contenthtml_ = '';
                data.data.forEach(function (one, i) {
                    if (i == 0) {
                        titlehtml_ += '<a class="mui-control-item mui-active" href="#item' + one.classificationId + 'mobile" data-classificationId="' + one.classificationId + '">' + one.classificationName + '</a>';
                        contenthtml_ += '<div id="item' + one.classificationId + 'mobile" class="mui-slider-item mui-control-content mui-active">' +
                            '<div id="scroll' + one.classificationId + '" class="mui-scroll-wrapper">' +
                            '<div class="mui-scroll">' +
                            '<div class="box">' +
                            '<div class="mui-loading">' +
                            '<div class="mui-spinner">' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    } else {
                        titlehtml_ += '<a class="mui-control-item" href="#item' + one.classificationId + 'mobile" data-classificationId="' + one.classificationId + '">' + one.classificationName + '</a>';
                        contenthtml_ += '<div id="item' + one.classificationId + 'mobile" class="mui-slider-item mui-control-content">' +
                            '<div id="scroll' + one.classificationId + '" class="mui-scroll-wrapper">' +
                            '<div class="mui-scroll">' +
                            '<div class="box">' +
                            '<div class="mui-loading">' +
                            '<div class="mui-spinner">' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }

                });
                $("#classification-box").html(titlehtml_);
                $(".mui-slider-group").html(contenthtml_);
                var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                logic(classificationId, 0, 0);
                mui('.mui-slider').slider();
                mui('.mu-scroll-wrapfper.slider-indicator.segmented-control').scroll({
                    scrollY: false,
                    scrollX: true,
                    indicators: false,
                    snap: '.mui-control-item'
                });
                initpullRefreshEl();
            }
        });
    }


    // 初始化下拉刷新上拉加载
    function initpullRefreshEl() {

        (function ($) {

            //阻尼系数
            var deceleration = mui.os.ios ? 0.003 : 0.0009;
            $('.mui-scroll-wrapper').scroll({
                bounce: false,
                indicators: true, //是否显示滚动条
                deceleration: deceleration
            });

            $.ready(function () {

                document.getElementById('slider').addEventListener('slide', function (e) {
                    // 这里可以获得标题
                    e.preventDefault();
                    var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                    logic(classificationId, 0, 0);
                    startingNumber = 0;
                });
                //循环初始化所有下拉刷新，上拉加载。
                $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                    $(pullRefreshEl).pullToRefresh({
                        down: {
                            contentrefresh: '正在加载...',
                            contentnomore:'没有更多数据了',
                            callback: function () {
                                var self = this;
                                if(self.element.querySelector('.mui-table-view')==null){

                                }
                                var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                                logic(classificationId, self, 1);
                            }
                        },
                        up: {
                            callback: function () {
                                var self = this;
                                var classificationId = $(".mui-active")[0].getAttribute("data-classificationid");
                                logic(classificationId, self, 2);
                            }
                        }
                    });
                });

            });

        })(mui);
    };

    mui('body').on('tap', '.yaoqing', function (e) {
        mui.openWindow({
            url: 'templets/html/sendfriend.html'
        });
    });

    //显示页数
    var pageSize = 15;
    //起始数
    var startingNumber = 0;

    //结尾数
    function logic(classificationId, self, index) {

        mui.showLoading("正在加载..", "div");
        if(self==0){
            startingNumber=0;
        }else{
            try {
                var ul = self.element.querySelector('.mui-table-view');
                var length = ul.querySelectorAll('li').length;
                if(length%pageSize == 0){
                    startingNumber = length;
                }else{
                    startingNumber = pageSize-length;
                }
            } catch (e) {
                self.endPullDownToRefresh(false);
                console.log(e);
            }

        }
        // 先加载必要的数据,在进行下上加载操纵
        //新闻内容
        $.ajax({
            url: website + '/NewsController/queryAll2',
            type: 'post',
            data: {
                classificationId: classificationId,
                startingNumber: startingNumber,
            },
            success: function (data) {
                var item = $(".mui-active")[1];
                if (index == 0) {
                    // 页面第一次加载操纵
                    var html = '';
                    if (item.querySelector('.mui-loading')) {
                        html += '<ul class="mui-table-view">';
                        data.data.forEach(function (one) {

                            html += '<li class="mui-table-view-cell" data-url-id="' + one.shangRaoNetLink + '" data-news-id="'+one.id+'">\n' +
                                '                                <div class="mui-card">\n' +
                                '                                <div class="mui-card-header mui-col-xs-8 mui-col-sm-8" style="display: inline-block;">' + one.title + '' +
                                '                                </div>\n' +
                                '                                <div class="mui-col-xs-3 mui-col-smy3 mui-inline mui-text-right">\n' +
                                '                                <img class="border-radius5" src="' + one.encryptedName + '" width="50"/>\n' +
                                '                            </div>\n' +
                                '                            <div class="mui-card-footer"><span>' + one.authorName + '</span><span>' + one.writingTime + '</span></div>\n' +
                                '                            </div>\n' +
                                '                            </li>';

                        });
                        html += '</ul>';
                        setTimeout(function () {
                            item.querySelector('.box').innerHTML = html;
                            mui.hideLoading();
                        }, 500);
                    };
                    mui.hideLoading();
                } else {
                    var html = '';
                    data.data.forEach(function (one) {
                        html += '<li class="mui-table-view-cell" data-url-id="' + one.shangRaoNetLink + '" data-news-id="'+one.id+'">\n' +
                            '                                <div class="mui-card">\n' +
                            '                                <div class="mui-card-header mui-col-xs-8 mui-col-sm-8" style="display: inline-block;">' + one.title + '' +
                            '                                </div>\n' +
                            '                                <div class="mui-col-xs-3 mui-col-smy3 mui-inline mui-text-right">\n' +
                            '                                <img class="border-radius5" src="' + one.encryptedName + '" width="50"/>\n' +
                            '                            </div>\n' +
                            '                            <div class="mui-card-footer"><span>' + one.authorName + '</span><span>' + one.writingTime + '</span></div>\n' +
                            '                            </div>\n' +
                            '                            </li>';
                    });

                    if(index == 2){
                        if (data.data.length == 0) {
                            self.endPullUpToRefresh(true);
                        } else if (data.data.length < pageSize) {
                            $(".mui-active:eq(1)").find(".mui-table-view").append(html);
                            self.endPullUpToRefresh(true);
                        } else {
                            $(".mui-active:eq(1)").find(".mui-table-view").append(html);
                            self.endPullUpToRefresh(false);
                        }
                    };
                    if(index == 1){
                        if (data.data.length == 0) {
                            self.endPullDownToRefresh(true);
                            self.endPullUpToRefresh(true);
                            mui.toast('没有更多数据了');
                        } else if (data.data.length < pageSize) {
                            $(".mui-active:eq(1)").find(".mui-table-view").prepend(html);
                            self.endPullDownToRefresh(true);
                            mui.toast('没有更多数据了');
                        } else {
                            $(".mui-active:eq(1)").find(".mui-table-view").prepend(html);
                            mui.toast('发现'+data.data.length+'条内容');
                            self.endPullDownToRefresh(true);
                        }
                    }
                    mui.hideLoading();

                }

            }
        });

    };




    window.onload = function () {
        $("#loading").hide();
    }

</script>
</body>

</html>
